<template>
  <div class="basetable-content">
    <div class="basetable-head">
      <slot name="head"></slot>
    </div>
    <el-table
      v-if="tableHeight"
      :data="data"
      stripe
      @selection-change="handleSelection"
      ref="tableRef"
      style="margin-top: 20px"
      :height="tableHeight"
    >
      <el-table-column v-if="hasCheck" type="selection" width="50">
      </el-table-column>
      <el-table-column
        v-if="hasIndex"
        type="index"
        label="序号"
        width="50"
        align="center"
      >
      </el-table-column>
      <template v-for="col in cols">
        <el-table-column
          v-if="col.prop === 'introduction'"
          :key="col.prop"
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
        >
          <template slot-scope="scope">
            <div class="index-definition" :title="scope.row.introduction">
              {{ scope.row.introduction }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="col.prop"
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
        />
      </template>
      <slot name="cols"></slot>
    </el-table>
    <div class="basetable-footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageIndex"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cols: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    page: {
      type: Object,
      require: true,
    },
    hasIndex: {
      type: Boolean,
      default: true,
    },
    hasCheck: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tableRef: undefined,
      tableHeight: '',
    }
  },
  created() {
    window.addEventListener('resize', this.setHeight)
  },
  mounted() {
    this.setHeight()
  },
  methods: {
    setHeight() {
      let contentHeight =
        document.querySelector('.basetable-content')?.clientHeight ?? 837
      let headHeight =
        document.querySelector('.basetable-head')?.clientHeight ?? 0
      // - footer - head - padding-bottom;
      this.tableHeight = `${contentHeight - 88 - headHeight - 16}px`
      // console.log("this.tableHeight :>> ", this.tableHeight);
    },
    handleSizeChange(pageSize) {
      this.$emit('update:page', { ...this.page, pageSize, pageIndex: 1 })
    },
    handleCurrentChange(pageIndex) {
      this.$emit('update:page', { ...this.page, pageIndex })
    },
    handleSelection(selection) {
      this.$emit('select-change', selection)
    },
  },
}
</script>

<style lang="scss" scoped>
.basetable-content {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  padding: 16px;
}

.basetable-footer {
  // margin: 15px;
  // padding: 10px;
  // display: flex;
  // justify-content: flex-end;
  // align-items: center;
  margin: 15px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  bottom: 19px;
  right: 19px;
}

::v-deep {
  .el-table__row {
    height: 60px;
  }
}

.index-definition {
  width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
</style>
